<template>
  <div>
    <t-dialog
      width="auto"
      class="dialog"
      placement="center"
      :header="false"
      :footer="false"
      :closeBtn="false"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <div class="dialog-body">
        <div class="left">
          <div class="drawer-head">
            <h3>{{header}}</h3>
          </div>

          <div class="product-info">
            <h3>{{ formData.title }}</h3>
            <p v-if="formData.is_sn">SN: {{ formData.sn }}</p>
          </div>

          <t-form :data="formData" :rules="rules" ref="form" layout="inline" label-align="top" @submit="onSubmit">
            <t-form-item v-if="isSN" style="width: 100%;margin-right: 0;">
              <div style="width: 100%;">
                <t-table
                  rowKey="id"
                  :data="formData.lists"
                  :columns="columns"
                  :stripe="stripe"
                  :bordered="bordered"
                  :hover="hover"
                  :size="size"
                  :max-height="maxHeight"
                  :table-layout="tableLayout ? 'auto' : 'fixed'"
                  :showHeader="showHeader"
                  cellEmptyContent="-"
                  resizable
                  :loading="loading"
                >
                  <template #sn="{ row, rowIndex }">
                    <t-form-item style="width: 100%" :name="'lists.' + rowIndex + '.sn'" :labelWidth='0' :rules='rules.sn' >
                      <t-input v-model="row.sn" style="width: 100%" disabled theme="column" placeholder="请输入SN码"></t-input>
                    </t-form-item>
                  </template>
                  <template #unit_price="{ row, rowIndex }">
                    <t-form-item style="width: 100%" :name="'lists.' + rowIndex + '.unit_price'" :labelWidth='0' :rules='rules.unit_price' >
                      <t-input-number label="￥" v-model="row.unit_price" :min="0" style="width: 100%" theme="column" placeholder="0.00"></t-input-number>
                    </t-form-item>
                  </template>
                  <template #remark="{ row, rowIndex }">
                    <t-textarea v-model="row.remark" autosize placeholder="请输入备注" />
                  </template>
                </t-table>
              </div>
            </t-form-item>

            <template v-if="!(!!isSN)">
              <t-form-item name="unit_price" style="width: 268px;margin-right: 18px;">
                <template #label>
                  <p class="form-label2">进货价</p>
                </template>
                <t-input-number label="￥" v-model="formData.unit_price" theme="column" style="width: 100%;" :min="0" placeholder="0.00"></t-input-number>
              </t-form-item>
              <t-form-item name="quantity" style="width: 200px;margin-right: 18px;">
                <template #label>
                  <p class="form-label2">数量</p>
                </template>
                <t-input-number v-model="formData.quantity" style="width: 100%;" :min="1" :max="formData.count" placeholder="请输入"></t-input-number>
              </t-form-item>
              <t-form-item name="remark" style="width: 100%;margin-right: 0;">
                <template #label>
                  <p class="form-label2">备注</p>
                </template>
                <t-textarea v-model="formData.remark" :maxlength="50" placeholder="请输入备注" />
              </t-form-item>
            </template>
          </t-form>
          <div class="footer-btn">
            <div></div>
            <t-space size="8px">
              <t-button theme="primary" class="" @click="handleConfirm">确定</t-button>
              <t-button theme="default" class="" @click="close">取消</t-button>
            </t-space>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";

export default {
  name: 'ProductEdit',
  components: {IconFont},
  data() {
    return {
      visible: false,
      header: '编辑信息',
      confirmBtn: {
        text: '保存',
        theme: 'primary',
        loading: false
      },

      isSN: 1, // 是否开启SN序列号

      formData: {
        title: '', // 产品标题
        product_id: '', // 产品ID
        quantity: '', // 数量
        is_sn: 1, // 开启SN序列号（0关闭；1开启）
        sn: '', // SN数据
        unit_price: '', // 含税单价（进货价）
        remark: '', // 备注（50个字内）
        lists: [
          {
            title: '', // 产品标题
            product_id: '', // 产品ID
            quantity: '', // 数量
            is_sn: 1, // 开启SN序列号（0关闭；1开启）
            sn: '', // SN数据
            unit_price: '', // 含税单价（进货价）
            remark: '', // 备注（50个字内）
          }
        ],
      },

      rules: {
        sn: [{ required: true, message: '请输入SN码', trigger: 'blur' }],
        unit_price: [{ required: true, message: '请输入进货价', trigger: 'blur' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'change' },
          { min: 1, message: '数量必须大于0', trigger: 'change' }
        ],
      },

      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'sn', title: 'SN码', width: 220 },
        {colKey: 'unit_price', title: '进货价', width: 160 },
        {colKey: 'remark', title: '备注', width: 220 },
      ],
      maxHeight: 200,
      loading: false,
    }
  },
  methods: {
    // 确认入库
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        let params = []
        if (this.isSN) {
          params = {
            cId: this.formData.lists[0].cId,
            title: this.formData.lists[0].title, // 产品标题
            product_id: this.formData.lists[0].product_id, // 产品ID
            quantity: this.formData.lists[0].quantity, // 数量
            is_sn: this.formData.lists[0].is_sn, // 开启SN序列号（0关闭；1开启）
            sn: this.formData.lists[0].sn, // SN数据
            unit_price: this.formData.lists[0].unit_price, // 含税单价（进货价）
            remark: this.formData.lists[0].remark, // 备注（50个字内）
          }
        } else {
          params = {
            cId: this.formData.cId,
            title: this.formData.title, // 产品标题
            product_id: this.formData.product_id, // 产品ID
            quantity: this.formData.quantity, // 数量
            is_sn: this.formData.is_sn, // 开启SN序列号（0关闭；1开启）
            sn: this.formData.sn, // SN数据
            unit_price: this.formData.unit_price, // 含税单价（进货价）
            remark: this.formData.remark, // 备注（50个字内）
          }
        }
        console.log('params', params)
        this.$emit('change', params)
        this.close();
      } else {
        this.$message.error(firstError);
      }
    },
    open(row) {
      this.isSN = row.is_sn
      console.log('isSN', this.isSN)
      this.visible = true
      this.formData = {
        ...row,
        lists: [row]
      }
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .t-form__controls {
  min-height: 0;
}

/deep/ .t-form__controls-content {
  min-height: 0;
}

/deep/ .dialog {

  .t-dialog--default {
    padding: 0;

    .t-dialog__body {
      padding: 0;
    }
  }
}

.dialog-body {
  display: flex;
}

.form-label2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: #000000E5;
}

/deep/ .t-dialog__body {
  margin: 0 !important;
}

/deep/ .dialog-body {

  .t-input.t-size-l {
    min-height: 40px !important;
  }

  .t-input-number.t-size-l .t-input {
    font-size: 17px;
    min-height: 40px;
  }

}


/deep/ .left {
  position: relative;
  width: 890px;
  padding: 32px 24px;
  padding-bottom: 24px;
  box-sizing: border-box;


  .drawer-head {
    color: black;
  }

  .product-info {
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 24px;
    background-color: #F9F9F9;
    border-radius: var(--td-radius-medium);

    h3 {
      font-size: 16px;
      font-weight: 600;
      line-height: 22.4px;
      text-align: left;
      color: #000000;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: #000000E5;
    }
  }
}


.footer-btn {
  width: 100%;
  display: flex;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
}

</style>
